<template>
  <div>
    <el-container>
      <!--头部-->
      <el-header style="background-color: #81c9f1; height: 75px;background-position: center">
            <h1>登录</h1>
      </el-header>

      <!--主体-->
      <el-main style="margin-top:100px;background-position: center;padding:0">
        <el-row :gutter="20" style="margin: 0 auto; width: 1000px;height: 100%">
          <el-col :span="14">
            <img src="imgs/img.png" style="width: 100%; margin-top: 50px">
          </el-col>
          <el-col :span="10">
            <el-card style="width: 100%;margin-top: 0px;padding:0;border:1px">
              <!--上方选择短信或密码登录-->
              <el-menu @select="handleSelect" mode="horizontal" :default-active="activeTab" style="background-color: #81c9f1;
                                padding: 10px 0 0 20px;">
                <el-menu-item index="1" class="login_title"><b>短信登陆</b></el-menu-item>
                <el-menu-item index="2" class="login_title"><b>密码登录</b></el-menu-item>
              </el-menu>
              <!--手机号登陆-->
              <el-form v-if="activeTab == '1'" style="margin-top:30px;margin-left: 10px"
                       :model="mobileForm" :rules="mobileRules" ref="mobileForm" label-width="" class="demo-mobileRules">
                <p style="color: #666666; text-align: left; font:15px '微软雅黑';margin:30px 0 20px 5px">验证即登录，未注册手机将自动注册</p>

                <el-form-item label="" prop="phone">
                  <el-input style="width: 330px;margin:10px 0 0 0" placeholder="请输入手机号码" v-model="mobileForm.phone">
                    <template slot="prepend">
                      <i class="el-icon-phone"></i>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="" prop="code">
                  <el-input style="width: 330px;margin:10px 0 0 0" placeholder="请输入验证码" @keydown.native.enter="submitMobileForm('mobileForm')"
                            v-model="mobileForm.code"></el-input>
                </el-form-item>
                <el-form-item>
                  <input v-model="mobileForm.agreement" type="checkbox" style="margin-left: 15px">+
                  <span style="font-size: 10px;color: #666666;margin-left: 5px">我已阅读并接受安心陪诊 《用户协议》 《隐私政策》</span>
                </el-form-item>
                <el-form-item>
                  <el-row style="height: 50px;width: 80%;padding-top: 5px;margin: 0 auto">
                    <el-col :span="12">
                      <!--TODO 手机号验证码-->
                      <el-button :disabled="!mobileForm.agreement" type="default" @click="getCode(mobileForm.phone)">获取验证码</el-button>
                    </el-col>
                    <el-col :span="12">
                      <el-button type="primary" @click="submitMobileForm('mobileForm')">登录</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-form>

              <!--账号密码登录-->
              <el-form v-if="activeTab == '2'" style="margin-top:30px;margin-left: 10px"
                       :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="" class="demo-passwordRules">

                <el-form-item label="" prop="userName">
                  <el-input style="width: 330px;margin:10px 0 0 0"
                            v-model="passwordForm.username" placeholder="请输入用户名">
                    <template slot="prepend">
                      <i class="el-icon-user-solid"></i>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                  <el-input type="password" style="width: 330px;margin:10px 0 0 0"
                            @keydown.native.enter="submitPasswordForm('passwordForm')"
                            v-model="passwordForm.password" placeholder="请输入密码">
                    <template slot="prepend">
                      <i class="el-icon-lock"></i>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item ><!--不知道为什么删了这个el-form-item就验证不了密码了，所以留着-->

                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width: 330px" @click="submitPasswordForm('passwordForm')">登录</el-button>
                </el-form-item>
              </el-form>

              <!--切换-->
              <div style="float: right; margin: 20px 50px 30px 0;font: 12px '微软雅黑 Light';">
                <span ><a href="/reg" style="color: #0aa1ed">立即注册</a></span>
              </div>

            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<style>
body{
  margin: 0 auto;
}
body{
  background-image: linear-gradient(to bottom right,#0aa1ed, #81c9f1);
  background-repeat: no-repeat;
  height: 100vh;
}
.el-card>div{
  padding: 0;
}
.login_title{
  font-weight: 18;
  font:18px "微软雅黑 Light";
  border-radius: 5px;
}
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 2px solid #0aa1ed;
  color: #0aa1ed;
}
.el-form{
  padding-left:  20px;
}
.login_input{
  position: relative;
  padding: 10px;
}

.el-button--default{
  background: #FFF;
  border: 1px solid #DCDFE6;
  color: #606266;
}
.el-button--default:hover{
  background: #FFF;
  border: 1px solid #a1a3a8;
  color: #878a8f;
}
.el-button--default:focus{
  background: #FFF;
  border: 1px solid #DCDFE6;
  color: #606266;
}

.el-button--primary {
  color: #FFF;
  background-color: #0aa1ed;
  border-color: #0aa1ed;
}

.el-button--primary:focus{
  color: #FFF;
  background-color: #81c9f1;
  border-color: #81c9f1;
}

.el-button--primary:hover {
  color: #0aa1ed;
  border-color: #81c9f1;
  background-color: #81c9f1;
}
h1{
  margin-left: 20px;
  font: 24px -apple-system;
  color: #333333;
  line-height: 40px;
}
</style>
<script>
import BaseUrl from "@/http/BaseUrl";
import SimpleAxios from "@/http/SimpleAxios";

export default {
  data(){
    return{
      activeTab: '1',
      mobileForm: {
        phone: '',
        code:'',
        agreement:false
      },
      passwordForm: {
        username:'',
        password:'',
      },
      mobileRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的中国大陆11位手机号', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ]
      },
      passwordRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {

    getCode(phone){
      console.log(phone)
      if (phone.match(/^1[3-9]\d{9}$/)) {
        let url = BaseUrl.PASSPORT + '/passport/sendMessage/'+phone;
        console.log('url=' + url);


        SimpleAxios.get(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.$message.success("验证码发送成功！")
          } else {
            this.$alert(jsonResult.message, '错误', {
              confirmButtonText: '确定',
              callback: action => {
              }
            });
          }
        })
      }else{
        this.$message.error( '请输入正确的手机号')
      }
    },

    submitMobileForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = BaseUrl.PASSPORT+'/passport/loginByCode';
          console.log('url='+url);
          SimpleAxios.post(url,this.mobileForm).then((response)=>{
            let jsonResult = response.data;
            if(jsonResult.state===20000){
              this.$message({
                message: '登录成功',
                type: 'success'
              });
              //
              // localStorage.user=JSON.stringify(response.data.data);
              // location.href="/";//跳转到首页
              let loginInfo=jsonResult.data;
              localStorage.setItem('loginInfo', JSON.stringify(loginInfo));
              location.href="/homeIndex"

            }else if(jsonResult.state===40100){
              this.$message({
                message: jsonResult.message,
                type: 'error'
              });
            }else if(jsonResult.state===60001){
              this.$message({
                message:jsonResult.message,
                type:'error'
              })
            }else if(jsonResult.state===60002){
              this.$message({
                message:jsonResult.message,
                type:'error'
              })
            }else if(jsonResult.state===40101){
              this.$message({
                message:jsonResult.message,
                type:'error'
              })
            }
            else {
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {

                }
              });
            }
          });
        }else{
          console.log("输入错误");
          return false;
        }
      });
    },

    submitPasswordForm(formName) {
      // /!*通过this.$refs[formName].validate进行表单验证，并传入一个回调函数进行验证结果的处理。 *!/
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = BaseUrl.PASSPORT+'/passport/login';
          console.log('url='+url);
          // 设置请求头为 application/x-www-form-urlencoded

          SimpleAxios.post(url,this.passwordForm).then((response)=>{
            let jsonResult = response.data;
            if(jsonResult.state===20000){
              this.$message({
                message: '登录成功',
                type: 'success'
              });
              let loginInfo=jsonResult.data;
              localStorage.setItem('loginInfo', JSON.stringify(loginInfo));
              if(jsonResult.data.role===5){
                // this.$router.push('/admin/index')
                location.href="/admin/index"
              }else {
                location.href="/homeIndex"
              }

            }else if(jsonResult.state===40100){
              this.$message({
                message: jsonResult.message,
                type: 'error'
              });
            }
            else {
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          });
        }else{
          console.log("输入错误");
          return false;
        }
      });
    },
    handleSelect(key, keyPath) {
      if (key === '1') {
        this.activeTab = '1';
        // this.$refs.mobileRules.clearValidate(); // 清除短信登录表单的校验信息
        this.resetForm('passwordForm');
      } else if (key === '2') {
        this.activeTab = '2';
        this.resetForm('mobileForm');
      }
    },
    // /!*切换tab时重置另一侧信息*!/
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {
  },
  mounted() {

  }}

</script>
